import React, { useState } from 'react';
import { Button, Space, Table, Tag, Switch, Drawer } from 'antd';

import { useSelector, useDispatch } from 'react-redux';
import Myfrom from './Myfrom';
import { delshoplist,updateshoplist } from '../../store/reducer';


const Shoplist = () => {

    //获取数据
    let obj = useSelector(state => state.crms1)
    //console.log(obj);
    let dispatch = useDispatch()

    //控制抽屉显示隐藏的方法
    const [open, setOpen] = useState(false);
    //显示
    const showDrawer = () => {
        setOpen(true);
    };
    //隐藏
    const onClose = () => {
        setOpen(false);
    };
    //控制标题
    let [title, setTitle] = useState('添加')
    //添加={} 编辑={...}
    let [ itemobj, setItemobj ] = useState({})

    //表头设置
    const columns = [
        {
            title: '商品名称',
            dataIndex: 'title',
        },
        {
            title: '商品分类',
            dataIndex: 'typeId',
            render: (typeId) => {
                return obj.typelist.map(item => {
                    if (item.typeId == typeId) {
                        return item.label
                    }
                })
            }
        },
        {
            title: '商品价格',
            dataIndex: 'price',
        },
        {
            title: '商品状态',
            dataIndex: 'Collect',
            render: (Collect,index) => {
                return <Switch checked={Collect} onChange={() => { 
                    let obj = {
                        ...index,
                        Collect :!Collect
                    }
                    dispatch(updateshoplist(obj))
                }} />
            }
        },
        {
            title: '商品规格',
            dataIndex: 'specification',
            render: (specification) => {
                return specification.map(ele => {
                    return <Tag key={ele} color='green'>{ele}</Tag>
                })
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button onClick={() => {
                        //1.点击显示抽屉
                        showDrawer()
                        //2.修改标题
                        setTitle('编辑')
                        //3.编辑={...}
                        setItemobj(record)
                    }}>编辑</Button>
                    <Button onClick={()=>{
                        //执行删除方法
                        dispatch(delshoplist(record.id))
                    }}>删除</Button>
                </Space>
            ),
        },
    ];

    return <div>

        {/* 抽屉 */}
        <>
            <Button type="primary" onClick={() => {
                //1.点击显示抽屉
                showDrawer()
                //2.修改标题
                setTitle('添加')
                //3.添加={}
                setItemobj({})
            }}>
                添加
            </Button>
            <Drawer
                title={title}
                closable={{ 'aria-label': 'Close Button' }}
                onClose={onClose}
                open={open}
            >
                <Myfrom onClose={onClose} title={title} 
                itemobj={itemobj} key={new Date().getTime()}></Myfrom>
            </Drawer>
        </>

        {/* 表格渲染 */}
        <Table columns={columns} dataSource={obj.shoplist}
            rowKey={'id'} pagination={{ pageSize: 5 }} />
    </div>
};
export default Shoplist;
